<template>
    <div class="consult">
        <ul class="consult_title" >
            <li>
                <h2 class="f28">{{tit}}</h2>
            </li>
            <li>
                <router-link tag="span" class="f24" :to="lists.path">
                    查看全部 <i class="icon iconfont icon-jiantouyou f24"></i>
                </router-link>
            </li>
        </ul>
        <ol class="icon_list">
            <router-link tag="li" v-for="(item, key) in list" :key="key" :to="item.path">
                <div class="img " :class="cls">
                    <img :src="require('@/assets/my/' + (item.img) + '@2x.png')" alt="">
                    <span v-for="(i, k) in numList" :key="k" v-if="i.status_text == item.name">{{i.count >= 10 ? '9+' : i.count}}</span>
                </div>
                <h3 class="f26">
                    {{item.name}}
                </h3>
            </router-link>
        </ol>
    </div>
</template>

<script>
    export default {
        name: 'consult',
        props:{
            lists: Object,
            cls: String,
            type: String
        },
        data() {
            return {
                list: [],
                tit: '',
                numList: {}
            }
        },
        methods: {
            acquireList() {
                if(this.lists.title) {
                    this.tit = this.lists.title
                }
                if(this.lists.list) {
                    this.list = this.lists.list
                }
            },
            consultanceSummary() {
                let params = {}
                if(this.$store.state.isMaster) {
                    params = {
                        masterId: this.$store.state.masterId,
                        questionType: this.type
                    }
                } else {
                    params = {
                        userId: this.$store.state.userId,
                        questionType: this.type
                    }
                }
                this.$http.fetchGet('consultanceSummary', params).then((res) => {
                    if(res.code == 200) {
                        this.numList = res.data
                    }
                }, err => {

                })
            }
        },
        mounted() {
            this.acquireList();
            this.consultanceSummary()
        }
    }
</script>

<style lang="less" scoped>
    .consult{
        background: #fff;
        box-sizing: border-box;
        .mb(20);
        .consult_title{
            display: flex;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack:justify ;
            justify-content: space-between;
            .h(88);
            .lh(88);
            .pl(30);
            .pr(30);
            border-bottom: 1px solid #f2f2f2;
            li {
                span{
                    color: #999;
                }
            }
        }  
        .icon_list{
            display: flex;
            li{
                flex: 1;
                text-align: center;
                .pt(40);
                .pb(40);
                .img{
                    position: relative;
                    .w(88);
                    .h(88);
                    margin: 0 auto;
                    .mb(15);
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: auto;
                    }
                    span{
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        .w(24);
                        .h(24);
                        border-radius: 50%;
                        .lh(24);
                        text-align: center;
                        color: #fff;
                        background: red;
                    }
                }
                .xicon{
                    .w(50);
                    .h(50);
                    .mb(20);
                }
                h3{
                    color: #666;
                    font-weight: normal;
                }
            }
        }
    }
</style>
